<template>
    <div id="app">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(value,i) in banner_data" :key="i">
                <img :src="value.url" alt="">
            </van-swipe-item>
            <template #indicator="{active,total}">
                <div class="custom-indicator">{{banner_data[active]?.title}}{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
    </div>
</template>

<script setup>
defineProps({
    banner_data: {
        type: Array,
        default: () => []
    }
})
</script>
 
<style lang="less" scoped>
img {
    width: 100%;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    color: white;
    background: rgba(10, 10, 10,0.7);
}
</style>